<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>首页系统设置</title>
<style>
/* 自定义样式 */
body {
	padding-top: 56px; /* 用于修复固定导航栏时内容顶部被遮挡的问题 */
}

.navbar-custom {
	background-color: #007bff; /* 导航栏背景颜色 */
	color: #ffffff;
}

.navbar-custom .navbar-brand, .navbar-custom .navbar-nav .nav-link {
	color: #ffffff; /* 导航栏文字颜色 */
}

.navbar-custom .nav-item:hover {
	background-color: #0056b3; /* 鼠标悬停时的底色 */
}

.navbar-custom .nav-item:hover .nav-link {
	color: #ffffff; /* 鼠标悬停时的文字颜色 */
}
</style>
</head>
<body>
	<!-- 导航栏 -->


	<nav
		class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top navbar-custom">
		<a class="navbar-brand" href="#">书影音评论系统</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/home"/>">首页</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/user"/>">用户管理</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/media"/>">书影音管理</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/comment"/>">评论管理</a></li>
			</ul>
			<c:if test="${not empty user }">
				<span class="navbar-text welcome-message ml-auto"> 欢迎您，<c:out
						value="${user.username }" />
				</span>
			</c:if>

		</div>
	</nav>

	<!-- 首页 -->
	<!-- 主展示区 -->

	<div class="jumbotron jumbotron-fluid text-center">
		<div class="container">
			<h1 class="display-4">
				<c:if test="${not empty sessionScope.loggedInUser }">${sessionScope.loggedInUser.username}，</c:if>
				欢迎来到书影音管理界面
			</h1>
			<p class="lead">这是书影音管理员系统，在这里可以对用户、书影音和评论进行管理操作。</p>
			<!-- 显示当前时间 -->
			<div class="row mt-4">
				<div class="col-md-8 offset-md-2">

					<p id="currentTime" class="lead"></p>
				</div>
			</div>
			<!-- 你也可以添加按钮或链接 -->
		</div>
	</div>

	<div class="container">
		<h1>书影音评论系统</h1>
		<hr>

		<div class="row">
			<!-- 左侧柱状图部分 -->
			<div class="col-md-6">
				<div class="chart">
					<canvas id="myChart"></canvas>
				</div>
			</div>
			<!-- 右侧柱状图部分 -->
			<div class="col-md-6">
				<div class="chart">
					<canvas id="myChart1"></canvas>
				</div>
			</div>
		</div>
	</div>

	<!-- 页脚 -->
	<footer class="text-center py-3 fixed-bottom navbar-custom">
		&copy; 2023 书影音 </footer>
	<!-- JavaScript代码 -->
	<script>
  // 获取当前时间并显示在页面上
  function displayCurrentTime() {
    var currentTimeElement = document.getElementById('currentTime');
    var currentTime = new Date().toLocaleString(); // 获取本地时间

    currentTimeElement.innerHTML = '当前时间：' + currentTime;
  }

  // 页面加载完毕后立即显示当前时间
  window.onload = function() {
    displayCurrentTime();

    // 每秒钟刷新一次时间
    setInterval(displayCurrentTime, 1000);
  };
</script>
	<!-- 你的 Chart.js 初始化代码 -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
	<script>
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["用户", "书影音", "评论"],
      datasets: [{
        label: "统计数据",
        data: [${userCount}, ${mediaCount}, ${commentCount}],
        backgroundColor: ["#007bff", "#ffbb78", "#28a745"]
      }]
    },
    options: {
      title: {
        display: true,
        text: "系统统计信息"
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true 
          }
        }]
      }
    }
  });
</script>
	<script>
  var ctx = document.getElementById("myChart1").getContext("2d");
  var myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["图书", "音乐", "影视"],
      datasets: [{
        label: "统计数据",
        data: [${bookCount}, ${musicCount}, ${movieCount}],
        backgroundColor: ["#007bff", "#ffbb78", "#28a745"]
      }]
    },
    options: {
      title: {
        display: true,
        text: "书影音统计信息"
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true 
          }
        }]
      }
    }
  });
</script>

	<!-- 引入Bootstrap 4的JavaScript依赖 -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


</body>
</html>